<template>
  <!-- 滚动条只用于第一个子元素 -->
  <div id="stzb_main"  class="wrapper" ref="wrapper">
      <div class="content">
          <div id="header">
          <img src="../../assets/stzb_header_img.png" alt="stzb_header_img">
      </div>
      <div id="modules">
          <div class="module">
              <router-link to="/stzb/module?m=家用电器"><img
                      src="https://res.vmallres.com/cmscdn/CN/2023-11/282574c4c5af4a999080c4a16493dc94.png.50.webp"
                      alt="jiayongdianqi"></router-link>
              <p>家用电器</p>
          </div>
          <div class="module">
              <router-link to="/stzb/module?m=智能家装"><img
                      src="https://res.vmallres.com/cmscdn/CN/2023-11/0cf04f5458b44281ba719ba06b91a6ce.png.50.webp"
                      alt="jiayongdianqi"></router-link>
              <p>智能家装</p>
          </div>
          <div class="module">
              <router-link to="/stzb/module?m=数码配件"><img
                      src="https://res.vmallres.com/cmscdn/CN/2023-06/a81dbb9b85e84c77a33462f77a5cdd43.png.50.webp"
                      alt="jiayongdianqi"></router-link>
              <p>数码配件</p>
          </div>
          <div class="module">
              <router-link to="/stzb/module?m=教育办公"><img
                      src="https://res.vmallres.com/cmscdn/CN/2023-09/88211c2056724cd29f1ae510069104ec.png.50.webp"
                      alt="jiayongdianqi"></router-link>
              <p>教育办公</p>
          </div>
      </div>
      <div id="wuzhe_outer">
          <p class="title">5折秒杀</p>
          <router-link to="/stzb/wuzhelist?m=5折秒杀专区">
              <div id="wuzhe">
                  <div class="wuzheitem" v-for="(item,index) in wuzhe" :key="index">
                      <img :src="item.src" :alt="item.name">
                      <!-- <p>{{ item.name }}</p> -->
                      <p>{{ item.price }}</p>
                  </div>
              </div>
          </router-link>
      </div>
      <div id="dapai_outer">
          <p class="title">臻享大牌 限时秒杀</p>
          <div id="dapai">
              <div class="dapaiitem" v-for="(item,index) in dapai" :key="index">
                  <router-link :to="{name: 'itemdetail', params:{src:item.src, name:item.name, price:item.price}}">
                      <img :src="item.src" :alt="item.name">
                      <div class="dapaiitem_right">
                          <p class="dapaiitem_name">{{ item.name }}</p>
                          <p class="dapaiitem_price">{{ item.price }}</p>
                          <p class="buy">立即购买</p>
                      </div>
                  </router-link>
              </div>
          </div>
      </div>
      </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'stzb_main',
  data () {
    return {
      // 五折的item列表，大牌秒杀的列表
      wuzhe: [{ src: 'https://res2.vmallres.com/pimages//FssCdnProxy/vmall_bop_server/BopMaterialCenter/428_428_F148BD66D00FFCD3DC4AFFFAA3601B93.png', name: '亚都纯净型加湿器', price: '￥339' },
        { src: '', name: 'item2', price: '￥339' },
        { src: '', name: 'item3', price: '￥339' },
        { src: '', name: 'item4', price: '￥339' }],
      dapai: [{ src: 'https://res2.vmallres.com/pimages//FssCdnProxy/vmall_bop_server/BopMaterialCenter/428_428_F148BD66D00FFCD3DC4AFFFAA3601B93.png', name: '亚都纯净型加湿器', price: '￥339' },
        { src: '', name: 'item2', price: '￥339' },
        { src: '', name: 'item3', price: '￥339' },
        { src: '', name: 'item4', price: '￥339' }]
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: 3,
          // 允许使用点击事件
          click: false,
          // 允许上拉加载
          pullUpLoad: {
            threshold: -10
          },
          // 允许下拉加载
          pullDownRefresh: {
            threshold: 100,
            stop: 0
          },
          scrollbar: {
            fade: false,
            interactive: true // 1.8.0 新增
          }
        })
        this.scroll.on('scroll', position => {
          // console.log(position)
        })
        this.scroll.on('pullingDown', () => {
          console.log('下拉加载')
        })
        this.scroll.on('pullingUp', () => {
          console.log('加载更多')
          // 可以加载多次
          this.scroll.finishPullUp()
        })
      } else {
        this.scroll.refresh()
      }
    })
  }
}
</script>

<style scoped>
.wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

* {
  line-height: 11px;
}

p {
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: black;
}

img {
  height: 100%;
  width: 100%;
}

#header {
  overflow: hidden;
  height: auto;
  width: 100%;
}

#header img {
  margin: -35% 0 0 0;
}

#modules,
#wuzhe {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px 0 10px 0;
}

.module {
  height: 10%;
  width: 10%;
  margin: 0 10px;
  display: inline-block;
}

#wuzhe_outer,
#dapai_outer {
  margin: 20px 40px;
  border-radius: 10px;
  border: 1px solid rgb(255, 255, 255);
  background-color: rgb(255, 255, 255);
  min-height: 80px;
}

.title {
  margin: 10px 10px 0 10px;
  font-weight: 600;
  font-size: 14px;
}

.wuzheitem {
  height: 50%;
  width: 50%;
  margin: 0 10px;
  display: inline-block;
}

.wuzheitem p{
  text-align: center;
  margin-top: 5px;
}

.dapaiitem {
  /* min-height: 50%; */
  width: 100%;
  padding: 0 10px;
  display: inline-block;
  height: auto;
}

.dapaiitem img{
  float: left;
  width: 140px;
  height: 140px;
}

.dapaiitem_right{
  padding: 10px 0;
  position: relative;
  height: 140px;
  width: 200px;
  float: left;
  /* float: right; */
}

.dapaiitem_name{
  font-size: 14px;
}

.dapaiitem_price {
  font-size: 16px;
  position: absolute;
   bottom: 10%;
}

.buy {
  border: 1px solid black;
  border-radius: 30px;
  width: fit-content;
  position: absolute;
  bottom: 10%;
  right: 0;
  padding: 7px;
}
</style>
